<template>
	<view>
		<div class="status-bar" :style="{height: statusBarHeight}">
			<status-bar></status-bar>
		</div>
		
		<jiaonang></jiaonang>
		
		<!-- 导航栏 -->
		<scroll-view  
			:style="{marginTop: statusNav, top: statusNav}"
			class="nav-title" 
			scroll-x enable-flex 
			:scroll-into-view="'scroll' + tabIndex" scroll-with-animation
		>
		
			<view class="navitem" @click="getData(item.id)" v-for="(item, index) in vclass" :key="item.id" 
			:id="'scroll' + item.id">
				<view 
				class="navcon" 
				@click="onClickItem(index)" 
				:class="{active: tabIndex == index}">{{item.catename}}</view>
			</view>
		</scroll-view>
		
		<!-- <div class="scroll-nav" :style="{marginTop: statusNav}" >
			<scroll-nav></scroll-nav>
		</div> -->
		
		<view class="video-com">
			<video-com :list="videoList"></video-com>
		</view>
		
	</view>
</template>

<script>
	// const videos = require('@/common/video/video.json').video;
	export default {
		data() {
			return {
				videoList: [],
				statusBarHeight: "",
				statusNav: "",
				tabIndex: 0,
				videoHeight: "",
				vclass: [],
				loadId: 1
			}
		},
		methods: {
			onClickItem(index) {
				this.tabIndex = index;
			},
			// change(e) {
			// 	this.tabIndex = e.detail.current
			// },
			
			getData(id) {
				this.loadId = id;
				console.log(id);
				this.videoList = [];
				uni.showLoading({
					title: '正在加载'
				})
				this.request('/index/video/'+id).then(res => {
					// console.log(res);
					
					this.videoList = res.data.data;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
				
			}
		},
		onPullDownRefresh() {
			let id = this.loadId;
			// this.getData(id);
			
			uni.showLoading({
				title: '正在加载'
			})
			this.request('/index/video/'+id).then(res => {
				// console.log(res);
				
				this.videoList = res.data.data;
				uni.stopPullDownRefresh();
				uni.hideLoading();
			})
			
		},
		mounted() {
			
			let videoHeight = getApp().globalData.statusNav + 63;
			this.videoHeight = "calc(100vh - " + videoHeight + "px)";
			
			this.statusBarHeight = getApp().globalData.statusBar + "px";
			this.statusNav = getApp().globalData.statusNav + "px";
		},
		onLoad() {
			// this.videoList = videos;
			
			this.request('/index/vclass').then(res => {
				console.log(res.data.data);
				this.vclass = res.data.data
			})
			uni.showLoading({
				title: '正在加载'
			})
			this.request('/index/video/1').then(res => {
				// console.log(res);
				this.videoList = res.data.data;
				uni.hideLoading();
			})
			
		},
		onShow() {
			// uni.setTabBarStyle({
			//   borderStyle: 'white'
			// })
		},
		onHide() {
			// uni.setTabBarStyle({
			//   borderStyle: 'black'
			// })
		}
	}
</script>

<style scoped lang="scss">
	
	.status-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}
	
	// 导航栏
	.nav-title {
		position: sticky;
		z-index: 5;
		width: 100%;
		height: 70rpx;
		display: flex;
		white-space: nowrap;
		line-height: 70rpx;
		background-color: #fff;
		padding: 20rpx 0;
	
		.navitem {
			padding: 0 30rpx;
			font-size: 28rpx;
	
			.navcon {
				padding: 0 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				box-sizing: border-box;
			}
		}
		/deep/::-webkit-scrollbar {
		
		  display: none;
		
		  width: 0;
		
		  height: 0;
		
		  color: transparent;
		
		  background: transparent;
		
		}
	}
	
	.active {
		border-bottom: 2px solid #ff6d9f;
		color: #ff6d9f;
	}
	
	
	
	// 视频
	.video-com {
		margin-top: 15px;
	}
	
	
	
</style>
